﻿Ext.namespace('iOS.Content');

Ext.define('CardView', {
	extend : 'ContentView',

	statics: {
		BaseCls : 'card-view',
		SubCard : 'sub-card'
	},

	/*
	 * 每个cardView对应一个toolbar
	 */
	_toolBar : null,

	_toolBarName: null,

	/* 
	 * 当前被激活的card名称
	 */
	_curCard: null,

	/*
	 * 当前card的位置
	 */
	_curPos:null,

	/*
	 * 是否有垂直方向上运动的card
	 */
	_isVertical:null,

	/*
	 * 上一个card运动的位置
	 */
	_lastCardTranslate:null,

	/*
	 * card切换时，动画效果持续时间
	 */
    _animTime: '400',

    /*
     * cardView的配置信息，在每个App中进行配置
     */
    _cardCfg : null,

    /*
     * card列表，格式为 “名称”=>对象
     */
    _cardsMap: {},

	/*
	 * card名称集合，仅仅是保存了所有card的名称 
	 */
	_subCards : [],

	_top: false,

	_eventList: [
	    ['changeCard'],
	    ['changeOriCard']
	],

	/*
	 * @name:将要显示的card的名称
	 */
	changeCard: function(name){
		if(name == this._curCard){
			return false;
		}
		var tarCard = this._cardsMap[name];
		this.active(name, 'left');
	},

	/*
	 * ios中，一般情况下，点击list的按钮显示右边的card，点击bar上的按钮显示左边的card，
	 * 上面的事件主要用于list的点击，而此事件主要用于bar的点击
	 */
	changeOriCard: function(name){
		if(name == this._curCard){
			return false;
		}
		var tarCard = this._cardsMap[name];
		this.active(name, 'right');
	},

	/*
	 * 激活CardView下的某个view,默认显示card为subViewCfg中排第一个的card
	 * subCard的View的名称
	 */
	active: function(name, direction){
		var curCard       = this._cardsMap[this._curCard],
		    tarCard       = this._cardsMap[name],
		    animTime      = this._animTime,
		    toolBarBtnCfg = tarCard.toolBarBtnCfg,
		    that          = this;
		iOS.ViewManager.notify(this._toolBar, 'changeBtnBar', [name, direction]);
		if(tarCard._animation){
		    that._cardAnim(name, direction);
		    tarCard.getElCache().on('webkitTransitionEnd', function(){
		    	var $this = $(this),
		    	    $that = curCard.getElCache();
		    	$this[0].style.webkitTransitionDuration = 0;
		    	$this.off('webkitTransitionEnd');
		    	$that[0].style.webkitTransitionDuration = 0;
		    	$that.off('webkitTransitionEnd');
			    curCard.hide();
			    that._curCard = name;
		    });
		} else {
			tarCard.show();
			curCard.hide();
			this._curCard   = name;
		}
	},

	_initSubCard: function(){
		var cards     = this._cards;
		this._toolBar = iOS.ViewManager.getView(this._toolBarName);
		for(var i = 0; i < cards.length; i++){
			if(cards[i].paramter.isToolBar){
				continue;
			}
			var cardName = cards[i].paramter.name,
			    cardObj  = iOS.ViewManager.getView(cardName),
			    btnsObj  = iOS.ViewManager.getView(cardName + '-btns');
			cardObj.getElCache().addClass(this.self.SubCard).
			    css('position', 'absolute');
			btnsObj.getElCache().addClass(this.self.SubCard).
			    css('position', 'absolute');
			this._subCards.push(cardName);
			this._toolBar.btnBars[cardName] = btnsObj;
			this._cardsMap[cardName] = cardObj;
			if(i >= 1){
				cardObj.hide();
				btnsObj.hide();
			} else {
				this._curCard         = cardName;
				this._toolBar.curCard = cardName;
			}
		}
	},

	/*
	 * 
	 */
	_cardAnim : function(cardName, direction){
		var curCard  = this._cardsMap[this._curCard].getElCache()[0],
		    tarCard  = this._cardsMap[cardName].getElCache()[0],
		    height   = $(curCard).height(),
		    width    = $(curCard).width(),
		    animTime = this._animTime,
		    tarTranslate,
		    curTranslate,
		    data;
		curCard.style.zIndex = 'auto';
		tarCard.style.zIndex = 1;
	    switch(direction){
	    	case 'left':
	    	    tarTranslate = 'translate3d('  + width + 'px, 0, 0)';
	    	    curTranslate = 'translate3d(-' + width + 'px, 0, 0)';
	    	    break;
	    	case 'right':
	    	    tarTranslate = 'translate3d(-' + width + 'px, 0, 0)';
	    	    curTranslate = 'translate3d('  + width + 'px, 0, 0)';
	    	    break;
	    	case 'top':
	    	    tarTranslate = 'translate3d(0, -' + height + 'px, 0)';
	    	    curTranslate = 'translate3d(0, 0, 0)';
	    	    break;
	    	case 'bottom':
	    	    tarTranslate = 'translate3d(0, '  + height + 'px, 0)';
	    	    curTranslate = 'translate3d(0, 0, 0)';
	    	    break;
	    	default: 
	    	    return false;
	    }
	    tarCard.style.webkitTransform          = tarTranslate;
	    tarCard.style.webkitTransitionDuration = animTime + 'ms';
	    curCard.style.webkitTransitionDuration = animTime + 'ms';
	    $(tarCard).show();
	    setTimeout(function(){
	    	tarCard.style.webkitTransform      = 'translate3d(0, 0, 0)';
	    	setTimeout(function(){
		    	curCard.style.webkitTransform  = curTranslate;
		    }, 1);
	    }, 1);
	    
	    
	},

	getToolBar: function(){
		return this._toolBar;
	}

});

iOS.Content.CardView = CardView;
